<template>
	<view class="content">
		<view class="order-infor">
			<view class="time">
				<image src="../../static/image/index/time.png" mode=""></image>
				<view>{{orderInfor.updatetime}}</view>
			</view>
			<view class="address">
				<view class="start-point"></view>
				<view>{{orderInfor.start_address}}</view>
			</view>
			<view class="address">
				<view class="end-point"></view>
				<view>{{orderInfor.end_address}}</view>
			</view>
		</view>
		<view class="customer-infor">
			<view class="details">
				<view class="head">
					<image src="../../static/image/index/head-logo.png" mode=""></image>
					<view>{{orderInfor.passenger_username}}</view>
				</view>
				<view class="order-status">
					<view class="price">{{orderInfor.real_money}} <text>園</text></view>
					<view class="status">
						<view v-if="orderInfor.status==0">呼叫中</view>
						<view v-if="orderInfor.status==1">已接單</view>
						<view v-if="orderInfor.status==2">司機到達起點</view>
						<view v-if="orderInfor.status==3">開始出發</view>
						<view v-if="orderInfor.status==4">到達目的地</view>
						<view v-if="orderInfor.status==5">已支付</view>
						<image src="../../static/image/index/open-order.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="operate">
				<view class="clear-btn">
					<image src="../../static/image/index/clear.png" mode=""></image>
					<view>取消訂單</view>
				</view>
				<view class="interval"></view>
				<view class="call-btn" @click="call">
					<image src="../../static/image/index/phone.png" mode=""></image>
					<view>聯係乘客</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { orderDetails } from '../../request/api.js'
	export default {
		data() {
			return {
				orderInfor:''
			};
		},
		onLoad(option){
			this.getInfor(option.orderNum)
		},
		methods:{
			call(){
				let that = this;
				uni.makePhoneCall({
					// 手机号
					phoneNumber:that.orderInfor.passenger_phone,
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
						that.call(); //重复调用一次
					}
				});
			},
			async getInfor(e){
				uni.showLoading({
					title:'加載中...'
				})
				let res=await orderDetails({
					order_no:e
				})
				uni.hideLoading()
				if(res.code==1){
					this.orderInfor=res.data;
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FAFAFA;
		.content{
			width:702rpx;margin-left:auto;
			margin-right:auto;
			.order-infor{
				width:100%;box-sizing: border-box;margin-top:24rpx;
				padding:24rpx;background-color:#ffffff;
				border-radius: 15rpx;box-shadow: 0 2rpx 12rpx 0 rgba(204,204,204,0.3);
				&>view{
					display: flex;align-items: center;
				}
				.time{
					image{
						width:20rpx;height: 20rpx;
					}
					font-size:26rpx;color:#040404;line-height:37rpx;
				}
				.address{
					font-size:26rpx;color:#040404;line-height:37rpx;
					margin-top:24rpx;
					.start-point{
						width:16rpx;height:16rpx;border-radius: 50%;
						background-color: #D71B0A;
					}
					.end-point{
						width:16rpx;height:16rpx;border-radius: 50%;
						background-color: #FC9A03;
					}
				}
			}
			.customer-infor{
				width:100%;box-sizing: border-box;margin-top:24rpx;
				padding:24rpx;background-color:#ffffff;
				border-radius: 15rpx;box-shadow: 0 2rpx 12rpx 0 rgba(204,204,204,0.3);
				.details{
					display: flex;justify-content:space-between;
					.head{
						display: flex;align-items: center;
						font-size:36rpx;line-height:50rpx;
						color:#040404;
						image{
							width:88rpx;height:88rpx;margin-right:14rpx;
						}
					}
				}
				.order-status{
					.price{
						display: flex;align-items: flex-end;font-size:50rpx;
						line-height:60rpx;color:#040404;font-weight: bold;
						text{
							font-size:26rpx;line-height:37rpx;
							margin-left:5rpx;
						}
					}
					.status{
						display: flex;align-items: center;
						margin-top:5rpx;
						font-size:24rpx;line-height:33rpx;
						image{
							width:20rpx;height: 20rpx;
						}
					}
				}
			}
			.operate{
				margin-top:24rpx;border-top:1px solid #F0F0F0;
				display: flex;align-items: center;padding-top:24rpx;
				.clear-btn{
					flex:1;display: flex;align-items: center;justify-content: center;
					flex-direction:column;font-size:20rpx;color:#040404;
					line-height:28rpx;
					image{
						width:28rpx;height:28rpx;margin-bottom:5rpx;
					}
				}
				.call-btn{
					flex:1;display: flex;align-items: center;justify-content: center;
					flex-direction:column;font-size:20rpx;color:#040404;
					line-height:28rpx;
					image{
						width:26rpx;height:26rpx;margin-bottom:5rpx;
					}
				}
				.interval{
					width:1rpx;height:59rpx;background-color: #F0F0F0;
				}
			}
		}
	}
</style>
